<template>
    <scale-box :width="1920">
        <div class="index-map" >
            <Header :title="title"></Header>
            <div class="container">
                <div class="map">
                    <div class="arr" v-for="(arr, index) in dataArray" :key="index">
                        <div class="item" v-for="(item, index) in arr" :key="index" @click="clickHandle(item)">{{ item }}</div>
                    </div>
                </div>
            </div>
        </div>
    </scale-box>
</template>

<script>

import Header from '../components/Header.vue'
import MapIndex from '../components/MapIndex.vue'
import router from "@/router";
import ScaleBox from "@/components/ScaleBox/ScaleBox.vue";
import pageData from "@/assets/js/pageData";
export default {
    name: "indexMap",
    components: {
        ScaleBox,
        Header,
        MapIndex
    },
    data() {
        return {
            title: "石家庄220kV古城变",
            dataArray: [
                [
                    '主接线图',
                    '#1主变分图',
                    '500kV母线设备分图',
                    '直流系统图'
                ],
                [
                   '光字牌索引图',
                    '#2主变分图',
                    '220kV母线设备分图',
                    '交流系统图',
                    'AVC系统图'
                ],
                [
                   '系统结构及通讯状态分图',
                    '#3主变分图',
                    '35kV母线设备分图',
                    '站用变设备分图',
                ],
            ],
        };
    },
    methods: {
        clickHandle(item) {
            const mainMatch = item.match(/^#(\d+)主变分图$/);
            const sbMatch = item.match(/^(\d+)kV母线设备分图$/);
            const pushRoute = (path, ftCode) => {
                const data = pageData.find(d => d.ftCode == ftCode);
                if (!data) return;
                this.$router.push({
                    path,
                    query: {
                        ftIndex: data.ftIndex,
                        jgName: data.jgName,
                        ftName: data.ftName
                    }
                });
            };
            if (item === '主接线图') {
                this.$router.push('/mainPage');
                return;
            }
            if (mainMatch) {
                const ftCode = mainMatch[1] + 'zb';
                pushRoute('/zhubian', ftCode);
                return;
            }
            if (sbMatch) {
                const ftCode = sbMatch[1] + 'sb';
                pushRoute('/mxsb'+sbMatch[1], ftCode);
                return;
            }
        }

    },
    computed: {},
    mounted() {},
};
</script>

<style lang="less" scoped>
.index-map {
  width: 1920px;
}
.container {
  display: flex;
  padding: 30px;
  height: 600px;
  border: 1px solid #fff;
  color: #4f545b;
  width: 80%;
  margin:  50px auto;
  .map {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 30px;
    .arr {
      width: 18%;
      height: 100%;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: space-between;
    }
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 4rem;
      font-size: 1.5rem;
      margin-bottom: 10px;
      cursor: pointer;
      border-radius: 15px;

      /* 浅色按钮，在黑底上明显 */
      background: linear-gradient(to bottom, rgb(120,149,160), #ffffff);

      color: #222; /* 默认深色文字，对比明显 */
      transition: all 0.3s ease;
    }

    .item:hover {
      color: #fff; /* 悬停时变纯白 */
      text-shadow: 0 0 8px rgba(255,255,255,0.8); /* 白色发光效果 */

      transform: translateY(0px) scale(1.14);
      box-shadow: 0 10px 18px rgba(0,0,0,0.25);
    }

    .item:active {
      transform: translateY(1px) scale(0.96);
      box-shadow: 0 4px 8px rgba(0,0,0,0.18);
    }


  }
}
</style>
